<template>
    <div class="wrap">
        <Header :title="'我的'"/>
        <div class="head-box">
            <div class="head">
                <img src="../../images/img_01.png" alt="">
                   <div class="gender">
                <span>游客</span>
                <p>
                    <img src="../../images/icon_08_1.png" alt="">
                </p>
            </div>
            </div>
         
            <div class="back">
                <img src="../../images/icon_right.png" alt="">
            </div>
        </div>
        <!-- tab栏 -->
        <div class="tab-box">
            <div class="tab-top">
                <ul>
                    <li class="active">我的钱包</li>
                    <li class="jifen">我的积分</li>
                </ul>
            </div>
            <div class="tab-content">
                <div class="qianbao-content">
                    <ul class="qianbao">
                        <li>服务订单</li>
                        <li>商品订单</li>
                        <li>产检时间表</li>
                        <li>关于我们</li>
                    </ul>
                </div>
                <div class="qianbao-content hide">
                      <ul class="qianbao">
                        <li>服务积分</li>
                        <li>商品积分</li>
                        <li>产检时间表</li>
                        <li>关于我们</li>
                      </ul>
                </div>
            </div>
        </div>
        <Tabbar />
    </div>
</template>
<script>
import $ from "jquery";
//导入公共组件 tabbar.vue
import Tabbar from "../comments/tabbar.vue";
import Header from "../comments/header.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    $(".tab-top ul").on("click", "li", function() {
      var i = $(this).index();
      $(this)
        .addClass("active")
        .siblings()
        .removeClass("active");
      $(".tab-content .qianbao-content")
        .eq(i)
        .show()
        .siblings()
        .hide();
    });
  },
  components: {
    Tabbar: Tabbar,
    Header: Header
  }
};
</script>
<style scoped>
.wrap {
  height: 100%;
}
.head-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
}
.head {
  display: flex;
  align-items: center;
}
.gender {
  margin-left: 10px;
}
.gender p {
  margin-top: 10px;
  margin-bottom: 0;
}
.tab-box ul {
  list-style: none;
  padding-left: 0;
}
.tab-top ul {
  display: flex;
  /* justify-content: space-around; */
  border-bottom: 1px solid #ccc;
  margin: 0;
  /* padding: 10px; */
}
.tab-top ul li {
  width: 50%;
  border-right: 1px solid #ccc;
  padding: 16px;
  text-align: center;
}
.tab-top .jifen {
  border-right: none;
}
.hide {
  display: none;
}
.active {
  background-color: #ffc10761;
  color: red;
}
.qianbao-content .qianbao {
  margin: 0;
}
.qianbao-content .qianbao li {
  line-height: 3;
  border-bottom: 1px solid #ccc;
  padding-left: 10px;
}
.qianbao-content .qianbao li:nth-of-type(odd) {
  background-color: #cccccc85;
}
</style>